/**
 *
 *
 * @author TOTORO
 * @date 2021/8/11 10:33
 */

$(function () {
    // 点击打开下拉框
    $("#slt").click(function () {
        $(this).removeClass("arrow_box");
        if($(".options-high-index").css("display") == 'none') {
            $(".options-high-index").slideDown(300);
        } else{
            $(".options-high-index").slideUp(300);
        }
    });
    // 选项点击事件
    $(".options-item").click(function () {
        loading();
        setTimeout(v =>{
            $(".loading-box").remove();
            var text = $(this).children(":first-child").text();
            $(".selected-wrap").children(":first-child").remove();
            $(".selected-wrap .arrow-down").before($("<span><span>"+text+"</span><span class='select-tips'></span></span>"));
            $(".mod-select-child-dom").remove();
            $("#reason").val(text);
        }, 400);
    });

    $(document).on('click', function (e) {
        var e = e || window.event; //浏览器兼容性
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点，防止点击的是div子元素
            if (elem.id && elem.id =='slt') {
                return;
            }
            elem = elem.parentNode;
        }
        // $('#test').css('display', 'none'); //点击的不是div或其子元素
        try {
            $(".options-high-index").slideUp(300);
        } catch (err){
            return;
        }
    });

    // 说明字体限制
    $("#refuseDetail").keyup(function () {
        $(".remainder").text(200-parseInt($(this).val()));
    }).focus(function () {
        $(this).removeClass("arrow_box");
    });



    // 点击上传图片
    $("#refuseUploadImageBtn").click(function () {
        var that = $(this);
        // 生成一个临时的file input
        var $fileInput = $("<input type='file' style='display: none' name='eImages' class='image-input'>");
        $fileInput.click();
        // 如果上传了图片，则生成DOM
        $fileInput.change(function () {
            var file = $(this);
            var $imageLi = $("<li>" +
                "<div class='img'>" +
                "<img src='' style='width: 90px; height: 90px;'/>" +
                "</div>" +
                "<span class='img-desc'>添加说明</span>" +
                "<input type='hidden' name='instruction' value='添加说明'>"+
                "<span class='delete-icon'></span>" +
                "</li>");
            $imageLi.append($fileInput);
            $(".refuse-trigger").before($imageLi);
            Totoro.html5Reader(file, $imageLi.find("img"));
            // 如果图片有十个了！
            if($(".image-input").length == 10){
                that.parent().hide();
            }
        })
    });

    // 点击删除图片
    $(".pic-uploader-wrapper").on("click", ".delete-icon", function () {
        $(this).parent().remove();
        if($(".uploader-trigger").css("display") == 'none'){
            $(".uploader-trigger").show();
        }
    });

    // 点击添加文字描述
    $(".pic-uploader-wrapper").on("click", ".img-desc", function () {
        // 获得当前图片
        var imgPath = $(this).prev().find("img").attr("src");
        $nowInputImage = $(this);
        $("body").css({"overflow":"hidden", "padding-right":"16"});
        var $inputCheckBox = $("                        <div class='upload-img-preview-mask'>\n" +
            "                                <div class='upload-img-preview-wrapper'>\n" +
            "                                    <div class='upload-img-preview-content'>\n" +
            "                                        <div class='upload-preview-img'>\n" +
            "                                            <div class='pfm-img-preview'>\n" +
            "                                                <div class='viewer-container'>\n" +
            "                                                    <div class='viewer-canvas'>\n" +
            "                                                        <img src='"+imgPath+"' style='width: 297px; height: 212.3px; margin-left: 808.5px; margin-top: 176.85px; transform: rotate(0deg) scaleX(1) scaleY(1);'>\n" +
            "                                                    </div>\n" +
            "                                                    <div class='viewer-close'>\n" +
            "                                                    </div>\n" +
            "                                                </div>\n" +
            "                                            </div>\n" +
            "                                        </div>\n" +
            "                                        <div class='img-desc-edit'>\n" +
            "                                            <span class='img-desc-edit-title'></span>\n" +
            "                                            <textarea class='img-desc-edit-area' rows='4' maxlength='50' placeholder='请输入凭证说明'>"+($(this).text()!='添加说明'?$(this).text():'')+"</textarea>\n" +
            "                                            <span class='remainder'>50</span>\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </div>");
        $("#uipmAfter").before($inputCheckBox);
    });

    // 关闭文字描述大面板
    $("body").on("click", ".viewer-close", function () {
        // 获得输入的文字，渲染在图片描述上
        var text = $(".img-desc-edit-area").val();
        $nowInputImage.text(text);
        $nowInputImage.next().val(text);
        $(".upload-img-preview-mask").remove();
        $("body").prop("style", "");
    })

    $("body").on("click", ".viewer-container", function () {
        $(".viewer-close").click();
    });
});

// 提交之前的验证

$("#sumb").submit(function () {
    // 是否选择原因
    var reason = $("#reason");
    if(reason.val() == ""){
        $("#slt").addClass("arrow_box");
        return false;
    }
    // 说明
    var detail = $("#refuseDetail");
    if(detail.val().length < 1){
        detail.addClass("arrow_box");
        detail.prop("placeholder", "请输入原因！");
        return false;
    }
});

// 点击我要留言，展开留言板
$(".need_leaveAMessage").click(function () {
    var isShow = $("#leaveAMessagePanel").css("display");
    if(isShow == "none"){
        $("#leaveAMessagePanel").fadeIn(300);
    } else{
        $("#leaveAMessagePanel").fadeOut(300);
    }
});

function loading() {
    var $loading = $("<div class='loading-box'>" +
        "<div class='mod-loading-layer show'>" +
        "<div class='layer'></div>" +
        "<div class='mui-loading-img mui-loading-play'></div></div></div>");
    $("body").append($loading);
}
